/* ==========================================================
   Outcomes Page 2: How We Protect the Return
   File: wwwroot/css/outcome2-protect.css
   Used by: Views/Partials/blocklist/Components/outcomeTwoProtectBlock.cshtml
   Fluid layout: same scaling as the other Outcome blocks
   (6.8vw gutter, vw sizes with clamp() minimums/maximums).
   ========================================================== */
.oc2-pr {
  --pr-navy: #1b2a5b;
  --pr-box: #152662;
  --pr-orange: #ff9a45;
  --pr-orange-dark: #f5862a;
  --pr-card: #f7f7f9;
  --pr-muted: #4a5270;
  --pr-gutter: 6.8vw;
  --pr-ease-out: cubic-bezier(.16, 1, .3, 1);

  box-sizing: border-box;
  width: 100%;
  background: #fff;
  padding: clamp(40px, 4.2vw, 108px) var(--pr-gutter) clamp(44px, 4.4vw, 114px);
  font-family: "Poppins", system-ui, -apple-system, "Segoe UI", sans-serif;
  color: var(--pr-navy);
  -webkit-font-smoothing: antialiased;
}
.oc2-pr *, .oc2-pr *::before, .oc2-pr *::after { box-sizing: border-box; margin: 0; padding: 0; }

.oc2-pr__eyebrow {
  margin-bottom: clamp(16px, 1.65vw, 42px);
  font-size: clamp(11px, .86vw, 22px);
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--pr-navy);
}

/* ---------- Grid ---------- */
.oc2-pr__grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(14px, 1.6vw, 42px);
}

.oc2-pr__card {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  min-height: clamp(180px, 15.6vw, 400px);
  padding: clamp(18px, 1.6vw, 42px) clamp(16px, 1.4vw, 36px) clamp(20px, 1.8vw, 46px);
  background: var(--pr-card);
}
/* Gradient layer: fades in/out smoothly (gradients themselves can't animate) */
.oc2-pr__card::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  opacity: 0;
  transition: opacity .55s cubic-bezier(.65, 0, .35, 1);
  pointer-events: none;
}
/* Practice cards: peach gradient from the top, shown on hover */
.oc2-pr__card--practice::before {
  background: linear-gradient(180deg, #fde0c8 0%, #fdeee3 45%, #fbf9f8 100%);
}
.oc2-pr__card--practice:hover::before,
.oc2-pr__card--practice:focus-within::before { opacity: 1; }
/* Hint: the first white card shows the hover gradient until another card is hovered */
.oc2-pr__grid:not(.is-hovering) .oc2-pr__card--practice.is-default::before { opacity: 1; }

.oc2-pr__title {
  margin-bottom: clamp(10px, .9vw, 24px);
  font-size: clamp(16px, 1.23vw, 32px);
  font-weight: 600;
  line-height: 1.4;
  color: var(--pr-navy);
}
.oc2-pr__text {
  font-family: "DM Sans", "Poppins", sans-serif;
  font-size: clamp(13px, .92vw, 24px);
  line-height: 1.55;
  color: var(--pr-muted);
}

/* Optional orange link at the bottom of a practice card */
.oc2-pr__link {
  align-self: flex-start;
  margin-top: auto;
  padding-top: clamp(14px, 1.3vw, 34px);
  font-size: clamp(13px, .92vw, 24px);
  font-weight: 600;
  color: var(--pr-orange);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
  transition: color .3s ease, text-underline-offset .3s ease;
}
.oc2-pr__link:hover,
.oc2-pr__link:focus-visible {
  color: var(--pr-orange-dark);
  text-underline-offset: 5px;
}
.oc2-pr__link:focus-visible { outline: 2px solid var(--pr-navy); outline-offset: 3px; }

/* Intro card (first, gradient) */
.oc2-pr__card--intro::before {
  background: linear-gradient(30deg, #dfe3fb 0%, #ece6f3 45%, #fde9dc 100%);
  opacity: 1;
}
/* (the intro card always keeps its gradient) */
.oc2-pr__intro-title {
  margin-bottom: clamp(8px, .7vw, 18px);
  font-size: clamp(19px, 1.5vw, 40px);
  font-weight: 600;
  line-height: 1.45;
  color: var(--pr-navy);
}
.oc2-pr__card--intro .oc2-pr__text { color: var(--pr-navy); }

/* CTA card (last, navy) */
.oc2-pr__card--cta {
  justify-content: center;
  background: var(--pr-box);
  color: #fff;
}
.oc2-pr__cta-title {
  margin-bottom: clamp(14px, 1.3vw, 34px);
  font-size: clamp(19px, 1.42vw, 38px);
  font-weight: 600;
  line-height: 1.45;
  color: #fff;
  text-wrap: balance;
}
.oc2-pr__btn {
  display: inline-flex;
  align-items: center;
  align-self: flex-start;
  min-height: 44px;
  padding: clamp(12px, 1vw, 26px) clamp(14px, 1.2vw, 32px);
  background: var(--pr-orange);
  color: var(--pr-navy);
  font-size: clamp(13px, .92vw, 24px);
  font-weight: 600;
  line-height: 1.3;
  text-decoration: none;
  transition: background-color .3s ease, transform .4s var(--pr-ease-out), box-shadow .4s var(--pr-ease-out);
}
.oc2-pr__btn:hover,
.oc2-pr__btn:focus-visible {
  background: var(--pr-orange-dark);
  color: var(--pr-navy);
  transform: translateY(-2px);
  box-shadow: 0 12px 24px -12px rgba(255, 154, 69, .8);
}
.oc2-pr__btn:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }

/* ---------- Staggered fade-up (only when JS has run) ---------- */
.oc2-pr.js-reveal .oc2-pr__eyebrow,
.oc2-pr.js-reveal .oc2-pr__card { opacity: 0; transform: translateY(26px); }
.oc2-pr.js-reveal.is-visible .oc2-pr__eyebrow,
.oc2-pr.js-reveal.is-visible .oc2-pr__card {
  opacity: 1;
  transform: none;
  transition: opacity .7s ease var(--pr-delay, 0s), transform .9s var(--pr-ease-out) var(--pr-delay, 0s);
}
/* after the entrance, hover reacts instantly */
.oc2-pr.js-reveal.is-done .oc2-pr__card { transition: none; }

/* ---------- SMALL LAPTOP / TABLET ---------- */
@media (max-width: 1200px) {
  .oc2-pr { --pr-gutter: 32px; }
  .oc2-pr__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* ---------- TABLET PORTRAIT ---------- */
@media (max-width: 900px) {
  .oc2-pr { --pr-gutter: 24px; padding-top: 48px; padding-bottom: 52px; }
  .oc2-pr__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .oc2-pr__card { min-height: 0; }
}

/* ---------- MOBILE ---------- */
@media (max-width: 560px) {
  .oc2-pr { --pr-gutter: 20px; }
  .oc2-pr__grid { grid-template-columns: 1fr; }
  .oc2-pr__btn { align-self: stretch; justify-content: center; }
}

@media (prefers-reduced-motion: reduce) {
  .oc2-pr__card, .oc2-pr__card::before, .oc2-pr__btn, .oc2-pr__link { transition: none !important; }
  .oc2-pr.js-reveal .oc2-pr__eyebrow,
  .oc2-pr.js-reveal .oc2-pr__card { opacity: 1; transform: none; }
}